Div Breite berechnen

Guten Morgen,
Ich verzweifle gerade am Thema css div und Breite. Ich habe 32 divs a 15mm. Die sollen auf eine Seite. Mit Scrollbalken. Meine Überlegung 32x15 mm =480 mm.plus äußere divs + 2mm, plus 32 x 2mm =544mm. Der Browser gibt sich aber mit 537 mm/ 536,5 mm zufrieden . Wo ist der Denkfehler? Die Anzahl wird irgendwann dynamisch, daher muss ich berechnen.

<div style ="width:537mm; border:1mm solid blue;height: 14mm;"> 
<?php
echo '<div style="border:1mm solid red;width:15mm;height:12mm;float:left;"></div>'; 

for($x=1;$x<=$number;$x++)
{
echo "<div style='border:1mm solid green;width:15mm;height:12mm;text-align:center;float:left;font-size:0.5em;'>".$x.".".$selmonth.".".$selyear."</div>"; 

}?></<div> 

Also nichts wildes.ok bisschen php. Aber das wirft eigentlich nur die Anzahl der Tage im Mai raus. 1.5.24 -31.5.24 =31 Tage plus vorne eine Blankobox also die og 32 boxen.

Weiterer Versuch: px statt mm und css3 mit calc

Echo "der Mai hat ".$maxdatumboxbreite." Pixel und ".$number." datumsfelder";?> 

<div style ="width:calc(32 * 70px); border:1px solid blue;height: 15px;margin:30px;"> 
<?php
echo '<div style="border:1px solid red;width:70px;height:15px;float:left;"></div>'; 


for($x=1;$x<=$number;$x++)
{
echo "<div style='border:1px solid green;width:70px;height:15px;text-align:center;float:left;font-size:0.8em;'>".$x.".".$selmonth.".".$selyear."</div>"; 

}?></<div> 

Dann ne Funktion, welche border berücksichtigt.
Nächster Ansatz
Also, im ersten Schritt möchte ich nur 32 Boxen nebeneinander. Damit man es lesen kann, gerne mit hor. Scrollbalken. Wegen der Optik und wegen Scrollen habe ich um divs einen weiteren gepackt. Damit man es sieht, mit border.

Beispielsweise für den Mai. Der April hat 30 Tage, der Februar 28/29 usw. Deswegen berechnen.

Die Überlegung: 32 boxen a 1 px border =64 px.die Außenborder 2 px=66 px plus die width mal 32.zb width:50px =1600 plus 66 px. gleich 1666 px. Optisch passen tut es aber mit 1643px width. Also 23 px weniger. Irgendwo in der Rechnung sind 23 px zu viel gezählt.

    Echo "der Mai hat ".$maxdatumboxbreite." Pixel und ".$number." datumsfelder";?> 

    <div style ="width:calc(32 * 70px); border:1px solid blue;height: 15px;margin:30px;"> 
    <?php
    echo '<div style="border:1px solid red;width:70px;height:15px;float:left;"></div>'; 

    for($x=1;$x<=$number;$x++)
    {
    echo "<div style='border:1px solid green;width:70px;height:15px;text-align:center;float:left;font-size:0.8em;'>".$x.".".$selmonth.".".$selyear."</div>"; 

    }?></<div>

Im zweiten Schritt, soll dann eine Spalte links dazu kommen. 06:00 - 22:00 unterteilt in 15 Minuten. Also 16 h mal 4 viertel = 64 boxen plus 64 mal border:1px mal 2 rechts und links.

Aber erstmal möchte ich verstehen wie es berechnet wird. Optik, wie Margin etc. zum Schluss. Erwähnen sollte ich vielleicht, dass es aktuell an einem Samsung tablet getestet wird.
Alles erfolglos. Es gab auch Versuche mit calc(100% / 32) oder calc (100% / 32 px). Bin schon fast so weit, eine Tabelle zu nehmen. Wo ist der Fehler.? Ich habe auch feste Werte genommen.
Gruß
Aloja

Please also mark the comments that contributed to the solution of the article

Content-Key: 51939416948

Url: https://administrator.de/contentid/51939416948

Printed on: June 3, 2024 at 23:06 o'clock

4 Comments

Latest comment

Hallo,

Grundatz in 2024: mm Angaben interessieren niemanden, wir bauen Responsive UIs.
Hab dir mal eine Demo gebaut:

codepen.io/epixc0re/pen/XWwJjNL

LG,
Stefan

Moin,

kurz am Rande: Nach meinen Erfahrungen funktionieren weder px noch em zuverlässig.
Vermutlich weil die Browser selbstständig die Sachen umrechen in Abhängigkeit vom Display, Webseite und Wetter.

CSS ist der letzte Dreck an dem seit Jahre immer wieder gefummelt wird.
Ich bin mir aber noch nicht sicher ob JS oder CSS schlimmer ist.

Stefan

Hi, ich glaube, ich habe die Lösung:

  <div style="width: max-content; padding: 0 100px;height:60px;box-sizing:border-box;padding: 55px;>  
      <div style="width: max-content; padding: 0 100px;;border:1px solid red;margin:15px;height:50px;box-sizing:border-box;padding: 5px;vertical-align: middle; text-align: center;overflow-x: scroll; "> 
        <div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">1</div> 
        <div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">2</div> 
        <div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">3</div> 
        <div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">4</div> 
        <div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">5</div> 
        <div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">6</div> 
        <div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">7</div> 
...
</div></div>
        

So habe ich recht und links noch Rand und es sieht gut aus. Vielen Dank für die Demo. Was genau ist mit Response gemeint?Es kommt oftmals vor. Mm ok. Aber Pixel sind auch nicht intuitiv.
Gruß aloja

Zitat von @StefanKittel:

Vermutlich weil die Browser selbstständig die Sachen umrechen in Abhängigkeit vom Display, Webseite und Wetter.

Erstell normal kaum Seiten. Aber vor Jahren in guten Tutorials schon gelesen, dass am Anfang das "Nullen" steht. Firefox, Opera, IE - alle haben alleine beim Offset schon alleine eigene Vorstellungen.

Die ersten Codeblöcke sind ja Browser Detection und dann - so war es früher meist - IE 6, IE 7 fix, If not....

German Question CSS HTML PHP